<template>
  <div class="setting">
    <div class="leftCol">
      <div class="settingsMainHeader">个人中心</div>
      <ul class="setting-aside">
        <li v-for="(item,index) in settingList" :key="index" :class="{activeColor: activeName==item.name}"
            @click="handleClick(item)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="contentCol">
      <component :is="componentSrc"></component>
    </div>
  </div>
</template>

<script>
import Info from "@/components/Info";
import UpdatePassword from "@/components/UpdatePassword";
export default {
name: "Setting",
  components:{
    Info,UpdatePassword
  },
  data(){
    return {
      settingList:[
        {name: '个人信息',path: 'Info'},
        {name: '修改密码',path: 'UpdatePassword'}
      ],
      activeName: '个人信息',
      componentSrc: 'Info'
    }
  },
  methods:{
    handleClick(item){
      this.activeName = item.name;
      this.componentSrc = item.path;
    }
  }

}
</script>

<style lang="scss" scoped>
@import '../assets/css/setting.scss';
</style>
